<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3,
        p {
            display: none;
        }

        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }

        .change1 {
            width: 300px;
            height: 300px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #fff;
        }
    </style>
</head>

<body>

    <div class="box">
        <h3>欢迎XX登录</h3>
        <span class="loginOut">退出登录</span>
        <span class="delete">注销账号</span>
    </div>
    <p>
        <a href="./10reg.html">注册</a>
        <a href="./11login.html">登录</a>
    </p>


    <table border="1">
        <thead>
            <tr>
                <td>用户名</td>
                <td>密码</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>aa</td>
                <td>123</td>

                <td>
                    <button>删除</button>
                    <button>修改</button>
                </td>
            </tr> -->
        </tbody>
    </table>


    <div class="cover">
        <div class="change1">
            <h4>修改信息</h4>
            手机号<input type="text" value="" disabled> <br>
            用户名<input type="text" value=""> <br>
            密码<input type="text" value=""> <br>
            邮箱<input type="text" value=""> <br>
            <button class="btn2">确定</button>
        </div>
    </div>



    <script src="../js/cookie.js"></script>
    <script>

        // 动态生成了列表以后  
        //    可以把一些数据绑定在标签上 (自定义属性)
        //         数据只有一条  data="${key}"
        //         数据集有多条  可以存json格式的字符串  data="{"a"}"    外面换成单引号   data='{}'









        const oP = document.querySelector('p');
        const oH = document.querySelector('h3');
        const oOut = document.querySelector('.loginOut');
        const oDel = document.querySelector('.delete');



        let html = '';


        // 遍历
        for (var i = 0; i < localStorage.length; i++) {
            let key = localStorage.key(i);   // 获取名称
            let user = localStorage.getItem(key);   // json
            user = JSON.parse(user);   // 对象


            // 解构
            const { username, password, email } = user;


            // 需要把相关信息存到自定义属性中
            let users = {
                key,
                username,
                password,
                email
            }
            // 转成json字符串
            users = JSON.stringify(users);


            html += `
                <tr>
                    <td>${username}</td>
                    <td>${password}</td>
                    <td>${key}</td>
                    <td>${email}</td>
                    <td>
                        <button class="del" onclick="fn('${name}' , this)">删除</button>
                        <button class="change" index='${users}'>修改</button>
                    </td>
                </tr>
            `
        }

        const oT = document.querySelector('tbody');
        oT.innerHTML = html;



        const oCover = document.querySelector('.cover');


        oT.onclick = function (e) {
            const target = e.target;
            if (target.className === 'change') {
                let users = target.getAttribute('index');
                users = JSON.parse(users);
                console.log(users);
            }
        }

    </script>

</body>

</html>